<template>
	<!-- 视频监控 -->
	<div class="camera" v-cloak>
    <div id="myPlayer" v-show="cameraList.length != 0"></div>
    <div v-if="cameraList.length == 0" class="camera-is-disabled" :class="cameraList.length === 0 ?'color-black':'color-grey'">没有可用摄像头</div>
		<Panel :isShowComponent="cameraList.length != 0" @play="bindPlay" @control="control" @sliderChange="sliderChange" ></Panel>
	</div>
</template>

<script>
	import Panel from "./panel";
	import EZUIKit from "./ezuikit.js";
  //'http://hls01open.ys7.com/openlive/37eb4c245a0a4adabcc4a2f96ce49382.m3u8',

  /**
   * 预览：ezopen://[验证码@]域名/序列号/通道号[.清晰度].live[?参数1=值&参数2=值]
   示例：
   “ezopen://open.ys7.com/440912260/1.hd.live”，可以播放序列号为“440912260”设备“1通道”“高清”的“实时视频”

   回放：ezopen://[验证码@]域名/序列号/通道号[.回放源].rec[?参数1=值&参数2=值]
   示例：
   “ezopen://open.ys7.com/440912260/1.local.rec?begin=yyyyMMddhhmmss&end=yyyyMMddhhmmss”，可以播放序列号为“440912260”
   */
  import { controlCamera } from "@/api/page/monitoring.js";
	export default {
		name: "monitoring",
		components: {
      Panel
    },
    mounted(){
		  this.id = this.$route.query.id;
		  var width = document.getElementsByClassName("camera")[0].clientWidth;
		  var height = document.getElementsByClassName("camera")[0].clientHeight;
		  this.videoWidth = width - 400;
      this.videoHeight = height - 40;
    },
		data() {
			return {
        videoImg:'',
        playStatus:"autoplay",
        videoWidth:1000,
        videoHeight:800,
        videoSrc:"",
        splitBasis:1,
        muteStatus:'',
        isMute:true,
        isPlay:true,
        cameraList:[],
        selectedCamera:{},
        speed:1,
      };
		},
    destroyed(){
      //此stop方法有时成功有时失败，防止异常，stop后直接删除video dom
      try {
        this.decoder.stop();
      } catch (error) {

      }
		  this.decoder = null;
		  document.getElementById("myPlayer").remove();
    },
		methods: {
      initEZUIKit(url){
        // new EZUIKit.EZUIPlayer('myPlayer');
        var self = this;
        if(url==null) {
          url = "ezopen://open.ys7.com/" + self.selectedCamera.device.number + "/" + self.selectedCamera.channel + ".hd.live";
        }
        console.log("index initEZUIKit selectedCamera",self.selectedCamera)
        self.decoder=new EZUIKit.EZUIPlayer({
          id:'myPlayer',
          autoplay:true,
          decoderPath:'../..',
          url:url,
          accessToken:self.selectedCamera.accessToken,
          width:self.videoWidth,
          height:self.videoHeight,
          splitBasis:self.splitBasis,
          handleError:self.handlerError,
          handlerSuccess:self.handleSuccess,
        });
      },
      bindPlay(info){
        var begin  = this.formatTimestramp(info.begin);
        var end = this.formatTimestramp(info.end);
        var url  ="ezopen://open.ys7.com/"+info.deviceSerial+"/"+info.channelNo+".hd.rec?begin="+begin+"&end="+end;
        this.initEZUIKit(url);
      },
			control(type){
				if(type==12){
				  this.capturePicturePromise();
        }else {
				  var self = this;
          var obj = {
            accessToken:self.selectedCamera.accessToken,
            deviceSerial:self.selectedCamera.device.number,
            channelNo:self.selectedCamera.channel,
            direction:type,
            speed:self.speed,
          };
          controlCamera(obj)
          .then(response => {
          })
          .catch(err => {
            self.msgError("操作失败,异常信息："+JSON.stringify(err));
          });
        }
			},
			sliderChange(val){
        if(val>50){
          this.speed =2;
        }else{
          this.speed =1;
        }
			},
      handlerError(e){
        console.log('handlerError',e)
      },
      handleSuccess(e){
        console.log('handleSuccess',e)
      },
      capturePicturePromise() {
        var self =this;
        var capturePicturePromise = self.decoder.capturePicture(0, 'default');
        capturePicturePromise.then(function (data) {
          this.msgSuccess("截图成功！", data);
        })
      },
      formatTimestramp(val){
        const time = new Date(val);
        const Y = time.getFullYear();
        const M = (time.getMonth() + 1).toString().padStart(2, '0');
        const D = time.getDate().toString().padStart(2, '0');
        const h = time.getHours().toString().padStart(2, '0');
        const m = time.getMinutes().toString().padStart(2, '0');
        const s = time.getSeconds().toString().padStart(2, '0');
        return `${Y}${M}${D}${h}${m}${s}`
      }
    }
	};
</script>

<style lang="scss">
	@import "~@/assets/styles/mixin.scss";
	@import "~@/assets/styles/variables.scss";
  [v-cloak] {
    display: none;
  }
	/** 页面整体布局样式 */
	.camera {
    .color-grey {
      color: #f5f5f5;
    }
    .color-black {
      color: black;
    }
    .camera-is-disabled {
      height: 100%;
      display: flex;
      text-align: center;
      align-items: center;
      font-size: 32px;
      margin: 0px auto;
    }
		height: 100%;
		background-color: rgb(245, 245, 245);
		padding: 5px;
		@include flex;
		> div {
			height: 100%;
		}
	}
  #myPlayer {
    width: 100%;
    height: 100%;
    margin-top: 15px;
  }
</style>
